<template>
    <view class='head'>
        <!-- 数字布进器 -->
        <view class="input_view_">
            <view class="sub flex" @click="sub">
                <image :style="'width:' + size + 'rpx;' + 'height:' + size + 'rpx;'" src="../../static/sub.png"  mode="">
                </image>
            </view>
            <view class="input flex">
                <input type="number" :style="'height:' + size + 'rpx;' + 'width:' + size * 2 + 'rpx;'" :value="value"
                    @input="input" @blur="onBlur">
            </view>
            <view class="add flex" @click="add">
                <image :style="'width:' + size + 'rpx;' + 'height:' + size + 'rpx;'" src="../../static/add.png" mode="">
                </image>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref ,computed} from 'vue'
const emit = defineEmits(['onInput', 'onAdd', 'onSub', 'onBlur'])
const subImageUrl = '../../static/sub.png'; // sub>1时显示的图片
const otherImageUrl = '../../static/sub-1.png'; // sub=1时显示的图片
const currentImage = computed(() => {
      return props.value <= 1 ? subImageUrl : subImageUrl;
    });

const props = defineProps({
    value: {
        type: Number,
        default: 1
    },
    size: {
        type: Number,
        default: 35
    }
})
const input = (e) => {
    emit('onInput', e)
}
const sub = () => {
    emit('onSub')
}
const add = () => {
    emit('onAdd')
}
const onBlur = () => {
    emit('onBlur')
}
</script>
<style scoped lang='scss'>
.head {
    width: 150rpx;

    .input_view_ {
        display: flex;
        align-items: center;

        .input {
            background-color: #e8e6e6;
            border-radius: 5rpx;

            input {
                height: 35rpx;
                color: #555;
                font-size: 30rpx;
                text-align: center;
            }
        }

        image {
            width: 35rpx;
            height: 35rpx;
        }

        .sub {
            margin-right: 10rpx;
        }

        .add {
            margin-left: 10rpx;
        }
    }
}
</style>